<%@ page pageEncoding="UTF-8"  contentType="text/html;charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
    <base href="<%=basePath%>">
  <head><title>User - Role manager page</title></head>
  <link rel="StyleSheet" href="resource/css/default.css" type="text/css"/>
  <style type="text/css">
		body{
			background-color: #F9F8E8;
			font-family: arial;
			font-size: 12px;
		}
		table{
			font-size: 12px;
			font-family: arial;
		}
		tr{
			background-color: #F9F8E8;
		}
		a{
			font-size: 12px;
			font-family: arial;
			color: green;
		}
		a:HOVER {
			color: red;
		}
		a:VISITED {
			color: gray;
		}
		a:FOCUS {
			color: yellow;
		}
		.table_role{
			width:360px;
			font-size: 12px;
			font-family: arial;
			background-color: #000000;
		}
		.role_th{
			font-family: arial;
			font-weight: bold;
			color: #123234";
		}
	</style>
  <script type="text/javascript" src="resource/js/mootools.js"></script>
  <script type="text/javascript" language="javascript">
      var addRoles = new Array();       //增加的角色
      var redundant = new Array();      //减少的角色
      var userId=0;
      var cur_row = null;

      function queryUser(){
          var msg_span = document.getElementById("user_msg");
          msg_span.innerHTML = "";
          var ucode = document.user.code.value;
          ucode = ucode.trim();
          var uname = document.user.name.value;
          uname = uname.trim();
          if(ucode == "" && uname == ""){
              msg_span.innerHTML = "查询条件不能为空。";
              return;
          }
          document.user.action.value="queryUser";
          $('user_form').send({update:'user_grid',onComplete:operComp,encoding:'UTF-8'});
          $('msg_disp_span').innerHTML = "操作正在进行...";
          $('role_grid').innerHTML = "";
      }

      function changeUser(uid,roww){
      	  $('msg_disp_span').innerHTML = "操作正在进行...";
          userId = uid;
          //改变当前行
          if(cur_row != null){
			cur_row.style.backgroundColor = "#F9F8E8";
  		  }
		  roww.style.backgroundColor = "#EEE999";
          cur_row = roww;
          var paras = "action=queryRole&userId=" + uid;
          var myAjax = new Ajax("userRole.was",{postBody:paras,update:'role_grid',onComplete:operComp,encoding:'UTF-8'}).request();
      }

      function saveUserRole(){
          var paras = "";
          if(addRoles.length > 0){
               var adds = "";
              addRoles.each(function(item,index){
                  if(index == 0){
                       adds = adds + item;
                  }else{
                      adds = adds + "-" + item;
                  }
              });
             if(adds != ""){
                 paras = "addroles=" + adds;
             }
          }
          if(redundant.length > 0){
              var res = "";
              redundant.each(function(item,index){
                  if(index == 0){
                       res = res + item;
                  }else{
                      res = res + "-" + item;
                  }
              });
              if(res != ""){
                  if(paras.indexOf("redundant=") < 0){
                      if(paras == ""){
                          paras = "redundant=" + res;
                      }else{
                          paras = paras + "&redundant=" + res;
                      }
                  }else{
                      paras = "&" + paras;
                  }
             }
          }
          if (paras == ""){
              alert("角色信息没有任何改变。");
              return;
          }else{
              paras = "action=save&userId=" + userId + "&" + paras;
          }
          $('msg_disp_span').innerHTML = "操作正在进行...";
          new Ajax("userRole.was",{postBody:paras,update:'role_grid',onComplete:operComp,encoding:'UTF-8'}).request();
          //重置　增加的与 删除的
          addRoles = new Array();       //增加的角色
          redundant = new Array();      //删除的角色
      }
      
      function operComp(){
      	$('msg_disp_span').innerHTML = "操作完毕.";
      }
      function selectRole(isSele,roleId){
          //如果是选择的，那么加入到新增的里面
          if(isSele){
            //检查删除的角色里，如果在删除的角色中有这个角色。那么在删除的角色中删除此项
              //如果在已标记为删除的项中没有此项，则新加到新增的数组中
              if(redundant.contains(roleId)){
                  redundant.remove(roleId);
              }else{
                    addRoles.push(roleId);
              }
        }else{
              //如果是删除一个角色
              //检查在新增的角色中是否已经存在，如果存在，则在新增的角色中删除即可
              //否则，加入到删除的角色列表当中
              if(addRoles.contains(roleId)){
                  addRoles.remove(roleId);
              }else{
                  redundant.push(roleId);
              }
        }
      }
      function mOvr(roww) {
		roww.style.cursor = "hand";
		if(roww != cur_row){
			roww.style.backgroundColor = "#FFF8C5";
		}
	}
	function mOut(roww) {
		roww.style.cursor = "default";
		roww.style.backgroundColor = "#F9F8E8";
		if(cur_row != null){
			cur_row.style.backgroundColor = "#EEE999";
		}
	}
  </script>
  <body>
  <table width="800">
      <tr>
          <td width="400"><br><span class="role_th">User list:</span><br></td>
          <td width="400"><br><span class="role_th">Role list:</span><br></td>
      </tr>

      <tr>
          <!-- 用户检索部分 -->
          <td valign="top">
              <table>
              		<tr><td colspan="5">&nbsp;</td></tr>
                  <tr>
                      <form action="userRole.was" name="user" id="user_form" method="post">
                      <td>Login id:</td><td><input type="text" name="code" size="12"/> </td>
                      <td>Name:</td><td><input type="text" name="name" size="12"/>
                      <input type="hidden" name="action" value="">
                       </td>
                      <td><input type="button" value="查询" onclick="queryUser()"/> </td></form>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr><td colspan="5"><span id="user_msg"></span></td></tr>
                  <tr><td colspan="5">
                      <div id="user_grid">

                      </div>
                  </td></tr>
              </table>
          </td>
          <!-- 角色部分 -->
          <td valign="top">
          	<br>
              <div id="role_grid" style="padding-top: 5px">
              </div>

          </td>
      </tr>
      <tr><td colspan="5">&nbsp;</td></tr>
      <tr><td colspan="5"><span style="padding-left: 2px;color: green;" id="msg_disp_span"></span></td></tr>
        <tr>
            <td colspan="2">
                <span style="padding-left: 370px"><input type="button" value="保存角色关联" onclick="saveUserRole()"/></span>
            </td>
        </tr>
  </table>
  </body>
</html>